<div class="containerStyle">
  <h3>描述</h3>
  <p>表格详情</p>
  <h3>示例</h3>
  <button type="button" (click)="changeData()">为表格新增一行数据</button>
  <ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns">
    <table>
      <thead>
        <tr>
          <!--当表头有排序图标或漏斗排序图标，文本title需要显示不下出省略号及tip时需使用ti-cell-text组件；
                        ti-head-sort为排序图标-->
          <!--使用展开详情图标时，需要给展开详情图标列加 details-icon-column 属性-->
          <th details-icon-column>{{columns[0].title}}</th>
          <th>
            <ti-cell-text>{{columns[1].title}}</ti-cell-text>
            <!-- sort接口为排序的属性名(字段，例如‘firstName’)-->
            <ti-head-sort [sortKey]="columns[1].sortKey"></ti-head-sort>
          </th>
          <th>
            <ti-cell-text>{{columns[2].title}}</ti-cell-text>
            <ti-head-sort [sortKey]="columns[2].sortKey"></ti-head-sort>
          </th>
          <th>
            <ti-cell-text>{{columns[3].title}}</ti-cell-text>
            <!-- asc接口指定初始排序是升序(true)还是降序(false)-->
            <ti-head-sort [sortKey]="columns[3].sortKey" [asc]="columns[2].asc"></ti-head-sort>
          </th>
          <th>
            <ti-cell-text>{{columns[4].title}}</ti-cell-text>
            <ti-head-sort [sortKey]="columns[4].sortKey"></ti-head-sort>
          </th>
          <!--该列无法排序，因为未做ti-head-sort设置-->
          <th tiOverflow>{{columns[5].title}}</th>
        </tr>
      </thead>
      <tbody>
        <!--注意:ngFor中的displayed数据与displayedData传入的数据一致, 初始化设置为[]即可-->
        <ng-container *ngFor="let row of displayed;index as i">
          <tr>
            <!--使用展开详情图标时，需要给展开详情图标列加 details-icon-column 属性-->
            <td details-icon-column>
              <ti-details-icon [row]="row" [index]="i"> </ti-details-icon>
              <!--详情图标设置，传入行数据-->
            </td>
            <td tiOverflow>{{row.firstName}}</td>
            <td tiOverflow>{{row.lastName}}</td>
            <td tiOverflow>{{row.age}}</td>
            <td tiOverflow>{{row.balance | currency}}</td>
            <td tiOverflow>{{row.email}}</td>
          </tr>
          <tr *tiDetailsTr="row">
            <!--详情内容行ti-details-tr，传入行数据-->
            <td tiColspan>
              <!--ti-colspan是为了使得该td（详情内容）占据表格整个宽度，本例中，作用相当于colspan='5'-->

              <div class="ti3-table-detail-container">
                <div>详情展示：{{row.firstName}}</div>
                <div>详情展示：{{row.balance}}</div>
                <div>详情展示：{{row.lastName}}</div>
              </div>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </table>
  </ti-table>
</div>
